<template>
	<view>
		<view style="display: flex;">
			<u--input
			    placeholder="请扫描学生编码"
			    border="surround"
			    clearable
				v-model="stuCode"
			  >
			</u--input>
			 <u-button style="width: 20%;" type="success" @tap="getCode" text="扫码"></u-button>
		</view>
		<view class="stuBox" style="width: 80%;background-color: aliceblue;border-radius: 20rpx;margin: 0 auto;margin-top: 20rpx;padding:10rpx"> 
			<view style="text-align: center;font-size: 40rpx;font-weight: 600;">{{userInfo.studentName}}</view>
			<view style="margin-top: 30rpx;" >
				<view style='display: flex;width:96%;margin-top: 10rpx;'>
					<view style="width: 30%;text-align: center;">性别：</view>
					<view style="width: 60%;overflow: hidden;">{{userInfo.studentSex}}</view>
				</view>
				<view style='display: flex;width:96%;margin-top: 10rpx;'>
					<view style="width: 30%;text-align: center;">年龄：</view>
					<view style="width: 60%;overflow: hidden;">{{userInfo.studentAge}}</view>
				</view>
				<view style='display: flex;width:96%;margin-top: 10rpx;'>
					<view style="width: 30%;text-align: center;">班级：</view>
					<view style="width: 60%;overflow: hidden;">{{userInfo.className}}</view>
				</view>
				<view style='display: flex;width:96%;margin-top: 10rpx;'>
					<view style="width: 30%;text-align: center;">学籍号：</view>
					<view style="width: 60%;overflow: hidden;">{{userInfo.studentId}}</view>
				</view>
				
			</view>
			<view style="display: flex;align-items: center;margin-top: 10rpx;">
				<view>是否矫正：</view>
				<view style='width:40%'><u--input v-model="userInfo.issljz2" disabled Color="#ffffff" placeholder="请选择是否矫正" border="none"></u--input></view>
				<u-button style="width: 20%;" type="success" @tap="showJZ = true" text="请选择"></u-button>
			</view>
			<view style="display: flex;align-items: center;margin-top: 10rpx;">
				<view>矫正方式：</view>
				<view style='width:40%'><u--input v-model="userInfo.jzfs2" disabled Color="#ffffff" placeholder="请选择矫正方式" border="none"></u--input></view>
				<u-button style="width: 20%;" type="success" @tap="showFS = true" text="请选择"></u-button>
			</view>
			<view style="margin-top: 30rpx;display: flex;margin-bottom: 30rpx;justify-content: space-around;" >
				<view @tap="check('zy')" :style="{background:(userInfo.dzbSlLEye?'#33FF66':'pink')}" style="width: 40%;height: 200rpx;border-radius: 20rpx;display: flex;align-items: center;justify-content: center;flex-direction: column;">
					<view>左眼视力</view>
					<view>{{userInfo.dzbSlLEye}}</view>
				</view>
				<view @tap="check('yy')" :style="{background:(userInfo.dzbSlREye?'#33FF66':'pink')}" style="width: 40%;height: 200rpx;border-radius: 20rpx;display: flex;align-items: center;justify-content: center;flex-direction: column;">
					<view>右眼视力</view>
					<view>{{userInfo.dzbSlREye}}</view>
				</view>
			</view>
		</view>
		<button @tap='submit()' style="position: fixed;bottom: 0;width: 80vw;left: 50%;margin-left: -40vw;height: 120rpx;font-size: 44rpx;" type="primary">提交</button>
		<u-popup mode="center" :round="10" :show="showSl" @close="close" @open="open">
			<view style="display: flex;flex-wrap: wrap;width: 90vw;justify-content: space-around;padding:20rpx 0">
				<view @tap="choose(item)" style="width: 40%;text-align: center;background-color: aquamarine;margin: 10rpx;height: 180rpx;line-height: 180rpx;border-radius: 10rpx;font-size: 34rpx;" v-for="(item,index) in slList" :key="index">{{item}}</view>
			</view>
		</u-popup>
		<u-picker :show="showJZ" :columns="isjzList" @cancel='showJZ = false' @confirm="confirmJZ" keyName="label"></u-picker>
		<u-picker :show="showFS" :columns="fsList" @cancel='showFS = false' @confirm="confirmFS" keyName="label"></u-picker>
	</view>
</template>

<script>
	import { listScreenPlanInfo, getScreenPlanInfo, delScreenPlanInfo, addScreenPlanInfo, updateScreenPlanInfo,smScreenPlanAdd,stuInfo,smScreenAdd } from "@/api/files/screenPlanInfo";
	import {
			getDicts
		} from '@/api/system/dict/data.js'
	export default {
		data() {
			return {
				showJZ:false,
				showFS:false,
				isjzList:[],
				fsList:[],
				planNo:'',
				checkItem:'',
				showSl:false,
				tips:'扫码',
				stuCode:'',
				userInfo:{
					issljz:'否',
					issljz2:'否'
				},
				slList:['5.2','5.1','5.0','4.9','4.8','4.7','4.6','4.5','4.4','4.3','4.2','4.1']
			}
		},
		watch:{
			stuCode(curVal, oldVal) {
			  clearTimeout(this.timeout)
			  this.timeout = setTimeout(() => {
			    if(this.stuCode != ''){
					this.queryOne()
			      
			    }
			  }, 800)
			},
		},
		onLoad(){
			getDicts('issljz').then(res=>{
				let arr = []
				var data=res.data
				for(let i=0;i<data.length;i++){
				   arr[i]={
						 label:data[i].dictLabel,
						 id:data[i].dictValue
					 }
				 }
				 this.isjzList = [arr]
			})
			getDicts('jzfs').then(res=>{
				let arr = []
				var data=res.data
				for(let i=0;i<data.length;i++){
				   arr[i]={
						 label:data[i].dictLabel,
						 id:data[i].dictValue
					 }
				 }
				 this.fsList = [arr]
			})
			// this.planNo = e.code
		},
		methods: {
			confirmJZ(e){
				if(e.value[0].label=='否'){
					this.userInfo.issljz2 = e.value[0].label
					this.userInfo.issljz = e.value[0].id
					this.userInfo.jzfs2 = ''
					this.userInfo.jzfs = ''
					this.showJZ = false
				}else{
					this.userInfo.issljz2 = e.value[0].label
					this.userInfo.issljz = e.value[0].id
					this.showJZ = false
				}
			},
			confirmFS(e){
				this.userInfo.jzfs2 = e.value[0].label
				this.userInfo.jzfs = e.value[0].id
				this.userInfo.issljz2 = '是'
				this.userInfo.issljz = '是'
				this.showFS = false
			},
			async queryOne(){
			    this.$nextTick(() => {
					 let studentId = this.stuCode.split(',')[1]
					 //let studentId = this.stuCode.trim()
					 stuInfo(studentId).then(res=>{
						 this.userInfo = res.data
						 this.userInfo.tmh = this.stuCode
						 this.userInfo.issljz = '否'
						 this.userInfo.issljz2 = '否'
					 })
				 })
			},
			open() {
			  // console.log('open');
			},
			close() {
			  this.showSl = false
			  // console.log('close');
			},
			getCode(){
				var that = this
				var mpaasScanModule = uni.requireNativePlugin("Mpaas-Scan-Module")
				
				mpaasScanModule.mpaasScan({
					'scanType':  ['qrCode','barCode'],
					'hideAlbum': false
				},
				(ret) => {
					let tmh = ret.resp_result.trim()
					
					that.stuCode = tmh
					let code = tmh.split(',')[1]
					// let code = tmh
					stuInfo(code).then(res=>{
						 that.userInfo = res.data
						 that.userInfo.tmh = tmh
						 that.userInfo.issljz = '否'
						 that.userInfo.issljz2 = '否'
					})
				})
			},
			check(e){
				this.showSl = true
				this.checkItem = e
			},
			choose(e){
				let item = this.checkItem
				if(item==='zy'){
					this.userInfo.dzbSlLEye = e
					this.showSl = false
				}else if(item==='yy'){
					this.userInfo.dzbSlREye = e
					this.showSl = false
				}
			},
			submit(){
				if(this.userInfo.issljz2=='是' && !this.userInfo.jzfs){
					uni.showToast({
						title: '请选择矫正方式',
						icon:'error',
						duration:850
					});
					return
				}
				if(!this.userInfo.dzbSlLEye){
					uni.showToast({
						title: '请选择左眼视力',
						icon:'error',
						duration:850
					});
					return
				}
				if(!this.userInfo.dzbSlREye){
					uni.showToast({
						title: '请选择右眼视力',
						icon:'error',
						duration:850
					});
					return
				}
				smScreenAdd(this.userInfo).then(res=>{
					uni.showToast({
						title: '提交成功',
						icon:'success',
						duration:850
					});
					this.userInfo = {}
					this.userInfo.issljz = '否'
					this.userInfo.issljz2 = '否'
					this.stuCode = ''
					
				}).catch(err=>{
					uni.showToast({
						title: '提交失败',
						icon:'error',
						duration:850
					});
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		padding:0 20rpx;
	}
	.ischeckzy{
		background-color: green;
	}
	.nocheckzy{
		background-color: pink;
	}
</style>
